<template>
  <div style="width: 100%;display: flex;justify-content: space-around">
    <el-skeleton
      :key="index"
      v-for="(item, index) in itemList"
      style="width: 15%;"
      :loading="loading"
      animated
      :throttle="500">
      <template slot="template">
        <div style="padding: 14px;">
          <el-skeleton-item variant="h3" style="width: 50%;" />
          <div
            style="display: flex; align-items: center; margin-top: 16px; height: 16px;">
            <el-skeleton-item variant="text" style="margin-right: 16px;" />
            <el-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
      <template>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px',width: '100%'}">
          <div style="padding: 14px;width: 100%;">
            <div style="display: flex;justify-content: space-around;width: 70%">
              <div>
                <i :class="item.icon"></i>
              </div>
              <div >
                <span>{{item.label}}</span>
              </div>
            </div>
            <div  style="display: flex;width: 80%;justify-content: center">
              <el-button type="text" class="button">{{item.num}}</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>
<script>
export default {
  name: "address",
  data() {
    return {
      loading: true,
      itemList: [
        {},{},{},{},{}
      ]
    }
  },
  created() {
    this.getTopValue();
  },
  methods: {
    getTopValue() {
      this.itemList = [{},{},{},{},{}];
      this.loading = true,
        this.$axios.get('/sys/echarts/getTop')
          .then((res)=> {
            console.log(res);
            setTimeout(()=>{
              console.log("一秒后执行一次");
              this.loading = false;
              this.itemList = res.data.data;
            }, 1500);

          })
          .catch((err)=> {
          })
    },
  }
}
</script>

<style scoped>
</style>
